<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性布局</title>
		<style>
		#all{
			display: flex;
			/* flex-direction: row;
			flex-wrap: wrap; */
			flex-flow: row wrap;
			/* justify-content: space-between; */
			justify-content: space-around;
			align-items: flex-end;
			align-content: space-between;
		}
		#all div{
			height: 100px;
			width: 100px;
			margin: 5px;
			background-color: #00FFFF;
			text-align: center;
			line-height: 100px;
			flex: 1 0.5 auto;
			order:99;
		}
		</style>
	</head>
	<body>
		<div id="all" >
			<div>1</div>
			<div style="height: 250px;">2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
			<div>91</div>
			<div>92</div>
			<div>93</div>
			<div>94</div>
			<div>95</div>
			<div>96</div>
			<div>97</div>
			<div style="order:1;">98</div>
			<div>99</div>
			<div>100</div>
			<!-- <div>
				和照耀是
			</div>
			<div>
				和照耀是
			</div>
			<div>
				和照耀是
			</div>
			<div>
				和照耀是
			</div>
			<div>
				和照耀是
			</div>
			<div>
				和照耀是
			</div>
			<div>
				和照耀是
			</div>
			<div>
				和照耀是
			</div>
			<div>
				和照耀是
			</div>
			<div>
				和照耀是
			</div>
			<div>
				和照耀是
			</div> -->
		</div>
		<p>
			和照耀是好同志
		</p>
	</body>
</html>
